<template>
  <div>
    <el-form :inline="true" :model="searchForm" class="demo-form-inline">
      <el-form-item label="名称">
        <el-input
          v-model="searchForm.dpName"
          placeholder="输入店铺名称回车即可"
          clearable
           @keydown.enter.native="getPage()"
        ></el-input>
      </el-form-item>
      <el-form-item label="描述">
        <el-input
          v-model="searchForm.dpDescribe"
          placeholder="输入地址回车即可"
          clearable
           @keydown.enter.native="getPage()"
        ></el-input>
      </el-form-item>
      <el-form-item label="开启状态">
        <el-select v-model="searchForm.dpStatus" placeholder="筛选店铺状态">
          <el-option label="开启中" value="1"></el-option>
          <el-option label="关闭中" value="0"></el-option>
        </el-select>
      </el-form-item>

      <el-form-item>
        <el-button type="primary" @click="search">查询</el-button>
        <el-button @click="showFrom">添加部门</el-button>
      </el-form-item>
    </el-form>

    <el-table :data="tableData" style="width: 100%">
      <el-table-column prop="dpName" label="名称" width="180" />
      <el-table-column prop="dpDescribe" label="描述" width="180" />
      <el-table-column label="店面状态">
        <template slot-scope="scope">
          <el-switch
            v-model="scope.row.dpStatus"
            active-color="#13ce66"
            inactive-color="#ff4949"
            :active-value="1"
            :inactive-value="0"
            @change="status(scope.row)"
          >
          </el-switch>
        </template>
      </el-table-column>

      <el-table-column label="操作">
        <template slot-scope="scope">
          <el-button size="mini" @click="handleEdit(scope.$index, scope.row)"
            >编辑</el-button
          >
          <el-button
            size="mini"
            type="danger"
            @click="handleDelete(scope.$index, scope.row)"
            >删除</el-button
          >
        </template>
      </el-table-column>
    </el-table>

    <el-pagination
      :page-size="limit"
      :current-page="page"
      :page-sizes="[2, 10, 20, 30]"
      layout="total, sizes, prev, pager, next, jumper"
      :total="total"
      @size-change="handleSizeChange"
      @current-change="handleCurrentChange"
    />

    <el-dialog :title="title" :visible.sync="dialogFormVisible">
      <el-form :model="form" label-position="right">
        <el-form :model="form">
          <el-form-item label="部门名称" label-width="100px">
            <el-input v-model="form.dpName" autocomplete="off" />
          </el-form-item>
          <el-form-item label="部门描述" label-width="100px">
            <el-input v-model="form.dpDescribe" autocomplete="off" />
          </el-form-item>
       
          <el-form-item label="店面状态" label-width="100px">
            <el-switch
              v-model="form.dpStatus"
              active-color="#13ce66"
              inactive-color="#ff4949"
              :active-value="1"
              inactive-value="0"
            >
            </el-switch>
          </el-form-item>
        </el-form>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="dialogFormVisible = false">取 消</el-button>
        <el-button type="primary" @click="addORupdate">确 定</el-button>
      </div>
    </el-dialog>
  </div>
</template>
<script>
export default {
  data() {
    return {
      searchForm: {},
      tableData: [],
      department: {},
      page: 1,
      limit: 10,
      total: 0,
      dialogFormVisible: false,
      title: "添加分店",
      form: {},
    };
  },
  created() {
    this.getPage();
  },
  computed: {},
  watch: {
    searchForm: {
      deep: true,
      handler(val) {
       if(val.dpName==''){
         val.dpName=null
       }
       if(val.dpDescribe==''){
         val.dpDescribe=null
       }
      },
    },
  },
  methods: {
    search() {
      this.getPage();
    },
    status(row) {
      this.$http
        .post(`http://127.0.0.1/department/status/${row.dpId}`)
        .then(({ data }) => {
          this.getPage();
        });
    },
    showFrom() {
      this.form = {};
      this.dialogFormVisible = true;
    },
    getPage() {
      this.$http
        .post(
          `http://127.0.0.1/department/page/${this.page}/${this.limit}`,
          this.searchForm
        )
        .then(({ data }) => {
          this.tableData = data.pageInfo.list;
          this.total = data.pageInfo.total;
        });
    },
    handleCurrentChange(val) {
      this.page = val;
      this.getPage();
    },
    handleSizeChange(val) {
      this.limit = val;
      this.getPage();
    },
    handleEdit(indedx, row) {
      this.$http
        .get(`http://127.0.0.1/department/getById/${row.dpId}`)
        .then(({ data }) => {
          this.dialogFormVisible = true;
          this.form = data.menu;
        });
    },
    handleDelete(indedx, row) {
      this.$confirm("此操作将永久删除, 是否继续?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      })
        .then(() => {
          this.$http
            .delete(`http://127.0.0.1/department/delete/${row.dpId}`)
            .then(({ data }) => {
              this.getPage();
            });
        })
        .catch(() => {
          this.$message({
            type: "info",
            message: "已取消删除",
          });
        });
    },
    addORupdate() {
      if (this.form.dpId != null) {
        this.$http
          .post(`http://127.0.0.1/department/updateById`, this.form)
          .then(({ data }) => {
            this.getPage();
            this.dialogFormVisible = false;
          });
      } else {
        this.$http
          .put(`http://127.0.0.1/department/save`, this.form)
          .then(({ data }) => {
            this.getPage();
            this.dialogFormVisible = false;
          });
      }
    },
  },
};
</script>
<style  scoped>
</style>